<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>星级评分</title>
    <style>
        a {
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }

        * {
            box-sizing: border-box;
        }

        .box {
            margin: 200px;
            display: flex;
        }

        section {
            margin-left: 10px;
            position: relative;
        }

        a {
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url('./img/star.png');
        }
        a.active1,
        a.active {
            background-position: 0 -28px;
        }

        .pingjia {
            border: 1px solid red;
            font-size: 12px;
            position: absolute;
            left: 0;
            top: 20px;
            width: 120px;
            display: none;
        }

        section:hover .pingjia {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <section>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="pingjia">五星好评</div>
        </section>
        <span class="result"></span>
    </div>

    <script src="./jquery.js">

    </script>
</body>

</html>
<script>
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    var score = 0;
    function showStar(count) {
        $('a').each(function (index) {
            if (index < count) {
                $('a').eq(index).addClass('active');
            } else {
                $('a').eq(index).removeClass('active');
            }
        });
    }
    $('a').mouseover(function () {
        showStar($(this).index() + 1);
        var left = $(this).position().left - 50;
         var amsg = msg[$(this).index()];
        $('.pingjia').css('left',left).html('<strong>'+($(this).index())+'分 ' +amsg.split('|')[0]+'</strong><br>'+amsg.split('|')[1]);
    });
    $('a').click(function(){
        score = $(this).index() + 1;
        $('.result').html('<strong style="color:red;">'+ score +'分'+'</strong>'+msg[$(this).index()].split('|')[1]);
    });
    $('a').mouseout(function(){
         showStar(score);
    });

//      $('a').mouseover(function(){
//         $('a').removeClass('active1');
//         $(this).addClass('active').prevAll().addClass('active');
//         var left = $(this).position().left - 50;
//         $('.pingjia').css('left',left);
//         var amsg = msg[$(this).index()];
//         $('.pingjia').css('left',left).html('<strong>'+($(this).index())+'分 ' 
//             +amsg.split('|')[0]+'</strong><br>'+amsg.split('|')[1]);    
//      });
//     $('a').mouseout(function(){
//         $('a').removeClass('active');
//     });
//    $('a').click(function(){
//          $('a').removeClass('active1');
//          $(this).addClass('active1').prevAll().addClass('active1');
//          score = $(this).index() + 1;
//          $('.result').html('<strong style="color:red;">'+ score +'分'+'</strong>'+msg[$(this).index()].split('|')[1]);
//     });
</script>